<template>
  <div class="wrapA" style="height: 100px; margin-bottom: 20px">
    <Suspense>
      <template v-slot:default>
        <Com />
      </template>
      <template v-slot:fallback> <Loading /> </template>
    </Suspense>
  </div>

  <div class="wrapA" style="height: 300px">
    <Suspense>
      <template v-slot:default>
        <Com />
      </template>
      <template v-slot:fallback> <Loading /> </template>
    </Suspense>
  </div>

  <div class="xxx-1">1</div>
  <div class="xxx-2">2</div>
  <div class="xxx-3">3</div>
  <div class="xxx-4">4</div>
  <div class="xxx-5">5</div>
</template>
<script>
export default {
  name: "testA",
};
</script>
<script setup>
import { ref } from "vue";
import Com from "./asyncCom.vue";
import Loading from "@/components/Loading";
let xxx = ref("1");
new Promise((resolve) => {
  setTimeout(() => {
    xxx.value = "aaaaaaa";
    resolve(true);
  }, 3000);
});
</script>
<style scoped lang="scss">
@mixin fs {
  font-size: 20px;
  color: #fff;
}
@function bgc($a, $b, $c) {
  @return rgba($a * $a * 5, $b * $b * 5, $c * $c * 5);
}
@for $i from 1 through 5 {
  .xxx-#{$i} {
    @include fs;
    width: $i * 50px;
    height: $i * 50px;
    margin-left: $i * 20px;
    background-color: bgc($i, $i, $i);
  }
}
</style>
